<template>
  <div class="wrap">
    <div class="w-title">
      账户明细
    </div>
    <a-tabs defaultActiveKey="1" @change="callback">
      <a-tab-pane tab="充值记录" key="1">
        <a-table :columns="recharging" :dataSource="data1" :pagination="false">
          <template slot="order_number" slot-scope="text">{{text}}</template>
          <template slot="price" slot-scope="text">{{text}}</template>
          <template slot="create_time" slot-scope="text">{{text}}</template>
          <template slot="type_name" slot-scope="text">{{text}}</template>
        </a-table>
        <div class="pagination">
          <a-pagination showQuickJumper v-model="page1" :total="total1" @change="onChange1" />
        </div>
      </a-tab-pane>
      <a-tab-pane tab="提现记录" key="2">
        <a-table :columns="cash" :dataSource="data2" :pagination="false">
          <template slot="zhifubao_name" slot-scope="text">{{text}}</template>
          <template slot="zhifubao_account" slot-scope="text">{{text}}</template>
          <template slot="price" slot-scope="text">{{text}}</template>
          <template slot="charge_price" slot-scope="text">{{text}}</template>
          <template slot="balance_money" slot-scope="text">{{text}}</template>
        </a-table>
        <div class="pagination">
          <a-pagination showQuickJumper v-model="page2" :total="total2" @change="onChange2" />
        </div>
      </a-tab-pane>
      <a-tab-pane tab="订单记录" key="3">
        <a-table :columns="order" :dataSource="data3" :pagination="false">
          <template slot="order_number" slot-scope="text">{{text}}</template>
          <template slot="price" slot-scope="text">{{text}}</template>
          <template slot="staues_name" slot-scope="text">{{text}}</template>
          <template slot="create_time" slot-scope="text">{{text}}</template>
        </a-table>
        <div class="pagination">
          <a-pagination showQuickJumper v-model="page3" :total="total3" @change="onChange3" />
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import { RECHARGING_LOG, GET_CASH, GET_ORDER_LIST } from "../server";
const recharging = [
  {
    title: '订单号',
    dataIndex: 'order_number',
    key: 'order_number',
  },
  {
    title: '充值金额 ',
    dataIndex: 'price',
    key: 'price',
  },
  {
    title: '充值时间',
    dataIndex: 'create_time',
    key: 'create_time',
  },
  {
    title: '支付类型',
    dataIndex: 'type_name',
    key: 'type_name',
  }
];
const cash = [
  {
    title: '支付宝名字',
    dataIndex: 'zhifubao_name',
    key: 'zhifubao_name',
  },
  {
    title: '支付宝账号 ',
    dataIndex: 'zhifubao_account',
    key: 'zhifubao_account',
  },
  {
    title: '提现金额',
    dataIndex: 'price',
    key: 'price',
  },
  {
    title: '手续费',
    dataIndex: 'charge_price',
    key: 'charge_price',
  },
  {
    title: '到账金额',
    dataIndex: 'check_price',
    key: 'check_price',
  },
  {
    title: '状态',
    dataIndex: 'type_name',
    key: 'type_name',
  }
];

const order = [
  {
    title: '订单号',
    dataIndex: 'order_number',
    key: 'order_number',
  },
  {
    title: '物品 ',
    dataIndex: 'title',
  },
  {
    title: '价格',
    dataIndex: 'price',
    key: 'price',
  },
  {
    title: '支付方式',
    dataIndex: 'staues_name',
    key: 'staues_name',
  },
  {
    title: '支付时间',
    dataIndex: 'create_time',
    key: 'create_time',
  }
];

export default {
  layout: "main",
  data() {
    return {
      recharging,
      cash,
      order,
      total1: 0,
      total2: 0,
      total3: 0,
      page1: 1,
      page2: 1,
      page3: 1,
      data1: [],
      data2: [],
      data3: [],
    };
  },
  created() {
    this.getRecharging();
  },
  methods: {

    getRecharging() {
      RECHARGING_LOG({
        page: this.page1,
        pageshow: 10,
      }).then(res => {
        this.data1 = res.data.list
        this.total1 = res.data.count
      });
    },
    getCash() {
      GET_CASH({
        page: this.page2,
        pageshow: 10,
      }).then(res => {
        this.data2 = res.data.list
        this.total2 = res.data.count
      });
    },
    getOrderList() {
      GET_ORDER_LIST({
        page: this.page3,
        pageshow: 10,
      }).then(res => {
        this.data3 = res.data.list
        this.total3 = res.data.count
      });
    },
    callback(key) {
      console.log(this.page1)
      if(key == 1) {
        this.page1 = 1
        this.getRecharging()
      } else if (key == 2) {
        this.page2 = 1
        this.getCash()
      } else if (key == 3) {
        this.page3 = 1
        this.getOrderList()
      }
    },
    onChange1(page) {
      this.page1 = page
      this.getRecharging()
    },
    onChange2(page) {
      this.page2 = page
      this.getCash()
    },
    onChange3(page) {
      console.log(page)
      this.page3 = page
      this.getOrderList()
    }
  }
};
</script>
<style lang="less" scoped>
.wrap {
  border: 3px solid #0084ff;
  border-radius: 6px;
  padding: 10px;
  .w-title {
    height: 40px;
    line-height: 40px;
    background: #0084ff;
    color: #fff;
    margin-bottom: 20px;
    border-radius: 6px;
    font-size: 18px;
    font-weight: bold;
    padding-left: 16px;
  }
}
.search {
  width: 330px;
}
.table {
  margin-top: 20px;
  .table-n {
    width: 200px;
    height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .table-img {
    width: 80px;
    height: 80px;
    margin-right: 20px;
  }
}
.pagination {
  margin: 70px auto 60px;
  text-align: center;
}
</style>